<template>
  <div>
    <div>
      <button @click="componentName='One'">One</button>
      <button @click="componentName='Two'">Two</button>
      <button @click="componentName='Three'">Three</button>
    </div>
            <component :is="componentName"></component>
  </div>
</template>

<script>
// 书写异步组件的原因:
//    在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块
//    Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
// import One from '@/components/One'
// import Two from '@/components/Two'
// import Three from '@/components/Three'
const One = () => {
  return import("@/components/One");
};
const Two = () => {
  return import("@/components/Two");
};
const Three = () => {
  return import("@/components/Three");
};
export default {
name:"App",
components:{
  One,
  Two,
  Three
},
data(){
  return{
    componentName:"One"
  }
}
}
</script>

<style>

</style>